import { Text, View } from '@tarojs/components'
import React from 'react'
import Card from '../card'
import { QuotationCategory, THEME_COLORS } from '../../constants/index'
import './index.less'

interface FeeDetailsProps {
  /** 自定义样式类名 */
  className?: string
  /** 是否显示 Card 包装 */
  showCard?: boolean
  /** 费用明细数据 */
  categories?: QuotationCategory[]
  /** 总金额 */
  totalAmount?: string
  /** 标题文本 */
  title?: string
  /** 总计标签文本 */
  totalLabel?: string
  /** 备注文本 */
  note?: string
  /** 是否显示备注 */
  showNote?: boolean
  /** 主题色 */
  primaryColor?: string
  /** Card 组件的 padding 设置 */
  cardPadding?: 'none' | 'sm' | 'md' | 'lg'
  /** Card 组件的圆角设置 */
  cardRounded?: 'none' | 'sm' | 'md' | 'lg'
}

const FeeDetails: React.FC<FeeDetailsProps> = ({
  className = '',
  showCard = true,
  categories,
  totalAmount,
  title = '费用明细',
  totalLabel = '总计',
  note = '*此报价为估算价格，最终价格以实际测量和材料选择为准。',
  showNote = true,
  primaryColor = THEME_COLORS.primary,
  cardPadding = 'md',
  cardRounded = 'none'
}) => {
  // 使用传入的数据或默认数据
  const displayCategories = categories || []
  const displayTotalAmount = totalAmount || '¥0'

  const content = (
    <View className={`fee-details ${className}`}>
      <View className='content-section'>
        <Text className='section-title'>{title}</Text>
        <View className='quotation-categories'>
          {displayCategories.map((category, categoryIndex) => (
            <View key={categoryIndex} className='category-group'>
              <View className='category-header'>
                <Text>{category.category}</Text>
                <Text>{category.total}</Text>
              </View>
              <View className='category-items'>
                {category.items.map((item, itemIndex) => (
                  <View key={itemIndex} className='category-item'>
                    <Text>{item.name}</Text>
                    <Text>{item.price}</Text>
                  </View>
                ))}
              </View>
            </View>
          ))}
        </View>

        <View className='quotation-footer'>
          <View className='quotation-summary'>
            <Text>{totalLabel}</Text>
            <Text className='summary-total' style={{ color: primaryColor }}>
              {displayTotalAmount}
            </Text>
          </View>
          {showNote && (
            <Text className='quotation-note'>{note}</Text>
          )}
        </View>
      </View>
    </View>
  )

  if (showCard) {
    return (
      <Card padding={cardPadding} rounded={cardRounded} className='quotation-card'>
        {content}
      </Card>
    )
  }

  return content
}

export default FeeDetails
